<template>
    <view>
        <Header returnIcon="white" :background="background" :title="title" />
        <CheckTitle :titleList="titleList" :checkIndex="checkIndex" @checkChange="checkChange"/>
        <view v-if="checkIndex == 1" class="content" :style="{'height': `${noBarHeight - 56}px`}">
            <view class="problem">
                <view class="problem_block" v-for="(item, index) in helpList" :key="index" @click="navHelpInfo(item)">
                    <img class="problem_icon" :src="item.img" />
                    <view class="problem_content">
                        <view class="problem_title">{{ item.title }}</view>
                        <view class="problem_label">{{ item.title }}</view>
                    </view>
                </view>
            </view>

            <view class="span_title">
                常见问题
            </view>

            <view class="problem_list" v-for="(item, index) in questionList" :key="index" @click="navHelpInfo(item)">
                <view class="list_text">
                    {{ item.title }}
                </view>
                <img class="icons" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/right_icon.png" />
            </view>
        </view>
        <view v-else class="content" :style="{'height': `${noBarHeight - 56 }px`}">
            <view class="opinion" :style="{'height': `${noBarHeight - 56 - 44}px`}">
                <view class="opinion_block" v-for="(item, index) in feedbackList" :key="index" @click="onReply(item)">
                    <view class="opinion_main">
                        <span class="old_main">意见：</span>
                            {{ item.content }}
                    </view>
                    <view class="opinion_footer">
                        <view :class="item.replys ? 'opinion_inStatus' : 'opinion_status'">{{ item.replys ? '已回复' : '未回复' }}</view>
                        <view class="opinion_time">{{item.addtime}}</view>
                    </view>
                </view>
            </view>
            <view class="add_btn" @click="onAdd">新增</view>
        </view>
    </view>
</template>
<script>
import CheckTitle from "@/components/CheckTitle.vue";
import Header from "@/components/Header.vue";
import {feedback, helps} from "../../../utils/api/user";
var app = getApp()
export default ({
    name: "help",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '帮助反馈',
            noBarHeight: app.globalData.noBarHeight,
            checkIndex: 1,
            titleList: [
                {
                    id: 1,
                    title: '帮助中心',
                    key: 'help'
                },
                {
                    id: 2,
                    title: '意见简介',
                    key: 'opinion'
                }
            ],
            helpList: [],
            questionList: [],
            feedbackList: [],
            feedbackPages: {
                size: 10,
                pages: 1,
                total: 0,
                isOver: false,
            }
        }
    },
    components: {
        Header,
        CheckTitle
    },
    onShow(){
        this.getData()
    },
    methods: {
        navHelpInfo(item) {
            uni.setStorageSync('helpInfo', item.info)
            uni.setStorageSync('helpTitle', item.title)
            uni.navigateTo({
                url: '../help/helpInfo'
            })
        },
        getData() {
            if (this.checkIndex == 1) {
                helps().then(res => {
                    this.helpList = res.data.help
                    this.questionList = res.data.question
                })
            } else {
                const params = {
                    uid: uni.getStorageSync('uid')
                }
                const pages = {
                    p: this.feedbackPages.page,
                    pages: this.feedbackPages.size
                }
                feedback(params, pages).then(res => {
                    this.feedbackList = res.data.data
                })
            }
        },
        onProblem(item) {
            uni.navigateTo({
                url: '../helpContent/helpContent'
            })
        },
        onReply(item) {
            uni.navigateTo({
                url: `../reply/reply?id=${item.id}`
            })
        },
        onAdd() {
            // TODO
            uni.navigateTo({
                url: '../opinionSubmit/opinionSubmit'
            })
        },
        checkChange(e) {
            this.checkIndex = e
            this.resetting()
            this.getData()
        },
        resetting() {
            this.feedbackPages = {
                total: 0,
                size: 20,
                page: 1,
                isOver: false
            }
            this.feedbackList = []
        },
        openConversation() {
            // uni.navigateTo({
            //     url: "/TUIKit/components/TUIConversation/index"
            // })
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    overflow-y: auto;
    /* 已经反馈 */
    .opinion {
        overflow-y: auto;
        .opinion_block {
            padding: 25rpx;
            background: white;
            margin-top: 20rpx;
            .opinion_main {
                color: #656667;
                font-size: 28rpx;
                width: 100%;
                .old_main {
                    font-weight: bold;
                    color: #525252;
                    font-size: 28rpx;
                }
            }
            .opinion_footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20rpx;
                .opinion_status {
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #656667;
                    line-height: 33rpx;
                    padding: 10rpx;
                    border: 2rpx solid #f2f2f2;
                }
                .opinion_inStatus {
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #9B9B9B;
                    line-height: 33rpx;
                    padding: 10rpx;
                    border: 2rpx solid #f2f2f2;
                }
                .opinion_time {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #9B9B9B;
                    line-height: 40rpx;
                }
            }
        }
    }
    .add_btn {
        width: 100%;
        height: 88rpx;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #5162FD;
        line-height: 40rpx;
        position: fixed;
        bottom: 0;
    }
    /*帮助中心*/
    .problem {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 10rpx 0;
        .problem_block {
            width: 47%;
            height: 100rpx;
            background: white;
            border-radius: 10rpx;
            display: flex;
            margin: 10rpx;
            box-sizing: border-box;
            .problem_icon {
                width: 44rpx;
                height: 44rpx;
                margin: 28rpx;
            }
            .problem_content {
                width: 100%;
                flex: 1;
                height: 100%;
                padding: 10rpx 0;
                display: flex;
                align-content: center;
                justify-content: space-between;
                flex-direction: column;
                box-sizing: border-box;
                .problem_title {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #656667;
                    line-height: 40rpx;

                }
                .problem_label {
                    height: 33rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C3C3C3;
                    line-height: 33rpx;
                }
            }
        }
    }
    .span_title {
        height: 45rpx;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #494949;
        line-height: 45rpx;
        margin: 40rpx 0 10rpx 50rpx;
    }
    .problem_list {
        width: 100%;
        height: 88rpx;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 45rpx;
        box-sizing: border-box;
        border-bottom: 2rpx solid #fafafa;
        .list_text {
            width: 100%;
            height: 40rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            line-height: 40rpx;
            flex: 1;
        }
        .icons {
            width: 15rpx;
            height: 24rpx;
        }
    }
}
</style>
